<template>
    <div class="bannerBlock">
        <div class="banner"><img src="@/assets/img/banner.png" /></div>
        <div class="userInfoBlock">
            <div v-if="userInfo == null">
                <div class="avatar"><img src="@/assets/img/company@2x.png" /></div>
                <div class="welCome">欢迎来到海囤客汽车平台</div>
                <div class="loginBlock">
                    <el-button type="primary" class="btn_gradient" @click="toLogin(0)">登录</el-button>
                    <el-button type="default" @click="toLogin(1)">注册</el-button>
                </div>
            </div>
            <div v-else>
                <div class="userInfo">
                    <div class="avatar"><img src="@/assets/img/company@2x.png" /></div>
                    <div class="company">{{ userInfo.name }}</div>
                </div>
                <div class="status">
                    <div :class="userInfo.authStatus == 2 ? 'item active' : 'item'">
                        {{ userInfo.authStatus == 0 ?   "未认证" : userInfo.authStatus == 1 ? "认证中":userInfo.authStatus == 2 ? "已认证":"认证已驳回"}}
                    </div>
                    <!-- <div class="item">未授信</div> -->
                </div>
                <div class="mb-22">
                    <el-button @click="handleOrderGo" style="width: 100%" class="btn_gradient" type="primary" size="large">我的订单</el-button>
                </div>
            </div>
            <div class="actions">
                <div class="item" @click="handleOrderGo">
                    <div class="icon"><img src="@/assets/img/loginBlock_1.png" /></div>
                    <div class="name">待签署</div>
                </div>
                <div class="item" @click="handleOrderGo">
                    <div class="icon"><img src="@/assets/img/loginBlock_2.png" /></div>
                    <div class="name">待支付</div>
                </div>
                <div class="item" @click="handleOrderGo">
                    <div class="icon"><img src="@/assets/img/loginBlock_3.png" /></div>
                    <div class="name">待还款</div>
                </div>
            </div>
            <div class="ad">
                <img src="@/assets/img/adv@2x.png" alt="" />
            </div>
        </div>
    </div>
    <el-row :gutter="20" class="sortList">
        <el-col :span="6" class="item">
            <div class="icon"><img src="@/assets/img/pinzhibaozhang.png" /></div>
            <div class="info">
                <div class="title">品质保障</div>
                <div class="subTitle">专业检测安心购买</div>
            </div>
        </el-col>
        <el-col :span="6" class="item">
            <div class="icon"><img src="@/assets/img/quanqiugoutong.png" /></div>
            <div class="info">
                <div class="title">全球沟通</div>
                <div class="subTitle">跨国无障碍沟通</div>
            </div>
        </el-col>
        <el-col :span="6" class="item">
            <div class="icon"><img src="@/assets/img/gouwubaozhang.png" /></div>
            <div class="info">
                <div class="title">购物保障</div>
                <div class="subTitle">先签署后付款</div>
            </div>
        </el-col>
        <el-col :span="6" class="item">
            <div class="icon"><img src="@/assets/img/directsales.png" /></div>
            <div class="info">
                <div class="title">贴心服务</div>
                <div class="subTitle">一站式服务售后保障</div>
            </div>
        </el-col>
    </el-row>
    <filter-block @change="paramsChange"></filter-block>
    <div class="goodList">
        <good-item :goodList="goodList"></good-item>
        <div v-if="goodList.length == 0" style="text-algin: center; width: 100%">
            <el-empty description="暂无该系列品牌车辆"></el-empty>
        </div>
    </div>
</template>
<script setup>
import { ref, watch, onMounted, getCurrentInstance } from "vue";
import { useStore } from "@/pinia/index.js";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import filterBlock from "./components/filterBlock.vue";
import goodItem from "./components/goodItem.vue";
import { getLocalStorage } from "@/utils/cache.js";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const $router = useRouter();
const store = useStore();
const { search } = storeToRefs(store);
const userInfo = ref({});

const goodList = ref([]);
const params = ref({
    current: 1,
    size: 9999,
    brand: "",
    keyword: "",
    model: "",
    series: "",
});
onMounted(() => {
    getGoodList();
    userInfo.value = getLocalStorage("USER_INFO");
});
watch(search, (newValue) => {
    params.value.keyword = newValue;
    getGoodList();
});
const handleOrderGo = () => {
    $router.push({ path: "/IndividualCenter", query: { type: 0 } });
};
const toLogin = (type) => {
    $router.push({ path: "/Login", query: { type } });
};
const paramsChange = (paramsObj) => {
    params.value = paramsObj;
    getGoodList();
};
const getGoodList = () => {
    proxy
        .$get({
            url: "/product/listing/products",
            params: params.value,
        })
        .then(
            (res) => {
                goodList.value = res.records;
                loading.value = false;
            },
            () => {
                loading.value = false;
            }
        );
};
</script>

<style lang="less" scoped>
.home {
    width: 1200px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
}
.goodList {
    display: flex;
    width: 1200px;
    margin: 15px auto;
    flex-wrap: wrap;
}
.bannerBlock {
    width: 1200px;
    display: flex;
    margin: 15px auto;
    .banner {
        width: 927px;
        height: 367px;
        box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
        border-radius: 5px;
        margin-right: 15px;
    }
    .userInfoBlock {
        width: 238px;
        height: 332px;
        background: #ffffff;
        box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
        border-radius: 5px;
        padding: 20px 10px 15px;
        .status {
            display: flex;
            margin-left: 64px;
            margin-bottom: 13px;
            .item {
                width: 56px;
                height: 21px;
                background: #d8d8d8;
                border-radius: 11px;
                text-align: center;
                line-height: 21px;
                font-size: 12px;
                font-weight: 400;
                color: #fff;
                margin-right: 10px;
                &.active {
                    background: #e2f1fc;
                    color: #348fe4;
                }
            }
        }
        .userInfo {
            display: flex;
            margin-bottom: 13px;
            .avatar {
                margin: 0;
            }
            .company {
                margin-left: 10px;
            }
        }
        .avatar {
            width: 54px;
            height: 54px;
            margin: 0 auto;
        }
        .welCome {
            text-align: center;
            margin: 15px auto;
        }
        .loginBlock {
            text-align: center;
            margin-bottom: 22px;
            .el-button {
                width: 95px;
                height: 36px;
            }
        }
        .actions {
            margin-bottom: 22px;
            display: flex;
            .item {
                color: #535353;
                margin: 0 auto;
                font-size: 12px;
                text-align: center;
                .icon {
                    width: 44px;
                    height: 44px;
                    margin-bottom: 8px;
                }
            }
        }
        .ad {
            padding-top: 10px;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 258px;
                left: -10px;
                height: 1px;
                background: #f2f2f2;
                top: 0;
            }
        }
    }
}
.sortList {
    width: 1200px;
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
    border-radius: 6px 6px 0px 0px;
    margin: 0 auto !important;
    .item {
        display: flex;
        align-items: center;
        .icon {
            width: 50px;
            height: 50px;
            margin-left: 50px;
        }
        .info {
            margin-left: 12px;
            .title {
                font-size: 18px;
                font-weight: 500;
                color: #202020;
                line-height: 25px;
            }
            .subTitle {
                font-weight: 400;
                color: #5e6163;
                line-height: 17px;
                font-size: 12px;
            }
        }
    }
}
</style>